<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合题库</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div>
        <div class="zr_header">
            <div class="zr-center-box">
                <img src="img/logo.png" class="zr_logo"/>
                <ul class="zr_tab">
                    <li>我的问卷</li>
                    <li>高级检索</li>
                    <li  class="zr_tab-border">综合题库</li>
                    <li>用户管理</li>
                    <li>考察点管理</li>
                    <li>联系人管理</li>
                    <li>帮助中心</li>
                </ul>
                <div class="zr_right-box">
                    <img class="zr_head-img" src="img/header.png"/>
                    <span>dnnfdsh</span>
                    <span>|</span>
                    <span>退出</span>
                </div>
            </div>
        </div>
        <div class="zr_fixed-box"></div>
        <div class="zr_search-box zr_float-l">
            <div class="zr-center-box">
                <div class="zr-form-box" id="basics">
                    <input class="zr_float-l zr_input-box zr_radio-left zr_input-max" type="text" placeholder="请输入题目标题、来源或题型检索"/>
                    <input class="zr_float-l zr-botton zr_pad" type="button" value="检索"/>
                    <span class="zr_float-l zr-title zr_radio-left">题目来源</span>
                    <select class="zr_float-l zr_sel zr_sel-mar">
                        <option>全部</option>
                        <option>导入题目</option>
                        <option>自创建</option>
                    </select>
                </div>
                <div class="zr-form-box" style="display: none;" id="advanced">
                    <div class="zr_float-l zr_add-box zr_radio-left">
                        <img src="img/a1.PNG"/>
                        <img src="img/a2.png"/>
                    </div>
                    <select class="zr_float-l zr_sel zr_sel-mar">
                        <option>题目标题</option>
                        <option>题目选项</option>
                        <option>导入题目</option>
                        <option>自创建</option>
                    </select>
                    <input class="zr_float-l zr_input-box zr_input-min" type="text" placeholder="请输入关键词"/>
                    <select class="zr_float-l zr_sel zr_sel-mar">
                        <option>并含</option>
                        <option>或者</option>
                    </select>
                    <input class="zr_float-l zr_input-box zr_input-min" type="text" placeholder="请输入关键词"/>
                    <input class="zr_float-l zr-botton zr_pad" type="button" value="检索"/>
                </div>
                <div class="zr_float-l zr-title zr_green-ionic zr_pointer" id="change"><span>切换高级检索</span><img class="zr_change-img" src="img/qiehuan.png"/></div>
                <div class="zr_float-r">
                    <div class="zr_float-l zr_button" id="add">
                        <img src="./img/add-icon.png" class="zr_ionic-show"/>新增题目
                    </div>
                    <div class="zr_float-l zr_button zr_clear-btn" id="sel-box">
                        <div id="sel"><img src="./img/sc.png" class="zr_ionic-show"/><span id="sel-text">生成问卷</span></div>
                        <ul class="zr-ul">
                            <li>生成问卷</li>
                            <li>创建新问卷</li>
                            <li id="add-wj-btn">追加至问卷</li>
                            <li>追加至随机题</li>
                        </ul>
                    </div>
                    <div class="zr_float-l zr_button zr_clear-btn">
                        <img src="./img/icon1.png" class="zr_ionic-show"/>删除题目
                    </div>
                </div>
            </div>
        </div>
        <div class="zr-center-box">
            <div  class="zr_float-l zr-checks-box">
                <span>题型：</span>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>单选题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>多选题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>填空题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>投票题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>图片题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>主观题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>矩阵题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>打分题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>随机题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>时间题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>排序题
                </label>
                <label class="zr_check-box">
                    <input class="zr_radio" type="checkbox"/>附件题
                </label>
            </div>
            <div class="zr_list-center">
                <div class="zr_float-l zr_list-l zr-fixed">
                    <input type="button" class="zr_save-btn zr_add-frist zr_button-w" value="+新增分类"/>
                    <ul class="zr_list-ul">
                        <li>全部</li>
                        <li class="zr_red">未分类</li>
                        <li>
                            <input type="text" class="zr_input"/>
                            <div class="zr_float-r">
                                <span class="zr_d zr_pointer">√</span>
                                <span class="zr_c zr_pointer">×</span>
                            </div>
                        </li>
                        <li class="zr_green-ionic">
                            题库分类
                            <div class="zr_float-r">
                                <img src="img/change.png" class="zr_ionic-list zr_pointer"/>
                                <img src="img/del-red.png" class="zr_ionic-show zr_pointer"/>
                            </div>
                        </li>
                        <li>题库分类</li>
                        <li>题库分类</li>
                        <li>题库分类</li>
                        <li>题库分类</li>
                        <li>题库分类</li>
                        <li>题库分类</li>
                    </ul>
                </div>
                <div class="zr_float-r zr_list-r">
                    <div class="zr_common-box zr_common-box-l zr_table-white">
                        <table>
                            <thead>
                                <tr>
                                    <td class="w-5">
                                        <label><input type="checkbox"/></label>
                                    </td>
                                    <td class="zr_text-left w-15">
                                        <div class="zr_float-l">类型</div>
                                        <div class="zr_float-l zr-sx-jt">
                                            <span class="block-j">▲</span>
                                            <span class="block-j">▼</span>
                                        </div>
                                    </td>
                                    <td class="zr_text-left w-25">
                                        题目
                                    </td>
                                    <td class="w-15">
                                        <div class="zr-td-center">
                                            <div class="zr_float-l">使用频次</div>
                                            <div class="zr_float-l zr-sx-jt">
                                                <span class="block-j">▲</span>
                                                <span class="block-j">▼</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="w-15">
                                        <div class="zr-td-center">
                                            <div class="zr_float-l">类型名称</div>
                                            <div class="zr_float-l zr-sx-jt">
                                                <span class="block-j">▲</span>
                                                <span class="block-j">▼</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="w-15">
                                        <div class="zr-td-center" style="width: 88px;">
                                            <div class="zr_float-l">考察点设置</div>
                                            <div class="zr_float-l zr-sx-jt">
                                                <span class="block-j">▲</span>
                                                <span class="block-j">▼</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="w-10">
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                            <tr class="zr_tr-border">
                                <td class="zr_vertical">
                                    <label><input type="checkbox"/></label>
                                </td>
                                <td class="zr_text-left zr_vertical">
                                   多选题
                                </td>
                                <td class="zr_text-left zr_subject">
                                    <div>喜欢看什么综艺节目？</div>
                                    <div><label><input type="checkbox"/> 快乐大本营</label></div>
                                    <div><label><input type="checkbox"/> 歌手</label></div>
                                    <div><label><input type="checkbox"/> 变形记</label></div>
                                    <div><label><input type="checkbox"/> 奔跑吧兄弟</label></div>
                                    <div><label><input type="checkbox"/> 天天向上</label></div>
                                </td>
                                <td class="zr_vertical">
                                    3次
                                </td>
                                <td class="zr_vertical">
                                    未分类
                                </td>
                                <td class="zr_vertical">
                                    未设置
                                </td>
                                <td class="zr_subject">
                                    <div><img class="zr_pointer" src="img/update.jpg"/></div>
                                    <div><img class="zr_pointer" src="img/delete.jpg"/></div>
                                </td>
                            </tr>
                            <tr class="zr_tr-border">
                                <td class="zr_vertical">
                                    <label><input type="checkbox"/></label>
                                </td>
                                <td class="zr_text-left zr_vertical">
                                    多选题
                                </td>
                                <td class="zr_text-left zr_subject">
                                    <div>喜欢看什么综艺节目？</div>
                                    <div><label><input type="checkbox"/> 快乐大本营</label></div>
                                    <div><label><input type="checkbox"/> 歌手</label></div>
                                    <div><label><input type="checkbox"/> 变形记</label></div>
                                    <div><label><input type="checkbox"/> 奔跑吧兄弟</label></div>
                                    <div><label><input type="checkbox"/> 天天向上</label></div>
                                </td>
                                <td class="zr_vertical">
                                    3次
                                </td>
                                <td class="zr_vertical">
                                    未分类
                                </td>
                                <td class="zr_vertical">
                                    未设置
                                </td>
                                <td class="zr_subject">
                                    <div><img class="zr_pointer" src="img/update.jpg"/></div>
                                    <div><img class="zr_pointer" src="img/delete.jpg"/></div>
                                </td>
                            </tr>
                            <tr class="zr_tr-border">
                                <td class="zr_vertical">
                                    <label><input type="checkbox"/></label>
                                </td>
                                <td class="zr_text-left zr_vertical">
                                    多选题
                                </td>
                                <td class="zr_text-left zr_subject">
                                    <div>喜欢看什么综艺节目？</div>
                                    <div><label><input type="checkbox"/> 快乐大本营</label></div>
                                    <div><label><input type="checkbox"/> 歌手</label></div>
                                    <div><label><input type="checkbox"/> 变形记</label></div>
                                    <div><label><input type="checkbox"/> 奔跑吧兄弟</label></div>
                                    <div><label><input type="checkbox"/> 天天向上</label></div>
                                </td>
                                <td class="zr_vertical">
                                    3次
                                </td>
                                <td class="zr_vertical">
                                    未分类
                                </td>
                                <td class="zr_vertical">
                                    未设置
                                </td>
                                <td class="zr_subject">
                                    <div><img class="zr_pointer" src="img/update.jpg"/></div>
                                    <div><img class="zr_pointer" src="img/delete.jpg"/></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="zr_pop" id="add-t">
                <div class="zr_center">
                    <h5 class="zr_til-pop">新增题目</h5>
                    <div class="zr_box">
                        <span class="zr_float-l zr-title zr_radio-left">题库分类</span>
                        <select class="zr_float-l zr_sel zr_mar-min">
                            <option>请选择</option>
                            <option>医疗</option>
                            <option>公共建设</option>
                            <option>互联网</option>
                        </select>
                    </div>
                    <div class="zr_box">
                        <span class="zr_float-l zr-title zr_radio-left">题目类型</span>
                        <select class="zr_float-l zr_sel zr_mar-min">
                            <option>请选择</option>
                            <option>单选题</option>
                            <option>多选题</option>
                            <option>填空题</option>
                        </select>
                    </div>
                    <div class="zr_box">
                        <span class="zr_float-l zr-title zr_radio-left">编辑题目</span>
                        <input class="zr_float-l zr_input-box" type="text" placeholder="请填写单选题题目"/>
                    </div>
                    <div id="box-add">
                        <div class="zr_box">
                            <input class="zr_float-l zr_input-box zr_radio-left" type="text" placeholder="请填写单选题题目"/>
                            <span class="zr_float-l zr-title zr_red zr_pointer">删除</span>
                        </div>
                    </div>
                    <div class="zr_box zr_hidden" id="other-input">
                        <input class="zr_float-l zr_input-box zr_radio-left" type="text" placeholder="其他"/>
                    </div>
                    <div class="zr_box">
                        <span class="zr_float-l zr-title zr_radio-left zr_pointer" id="add-input">+新建选项</span>
                    </div>
                    <div class="zr_box zr_better-til" id="better-til">
                        <img src="img/sz.png" class="zr_ionic-show zr_radio-left"/>
                        高级设置<img class="jt" src="img/jiantou.jpg">
                    </div>
                    <div class="zr_box zr_better-til zr_hidden" id="other">
                        <label class="zr_green-ionic">
                            <input type="checkbox" class="zr_radio-left" id="check"/> 添加[其他]选项
                        </label>
                    </div>
                    <div class="zr_user-add-btn">
                        <button class="zr_btn zr_btn1">确认</button>
                        <button  class="zr_btn zr_cancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="zr_pop" id="add-wj">
            <div class="zr_center zr_center-box zr_center-maxBig">
                <div class="zr_til-pop">
                    <div class="zr_float-l">追加至问卷</div>
                    <div class="zr_float-r">
                        <input class="zr_float-l zr_input-box zr_radio-left zr_input-max" style="margin: 10px;" type="text" placeholder="请输入题目标题">
                        <input class="zr_float-l zr-botton zr_pad" type="button" style="margin: 10px;" value="检索">
                    </div>
                </div>

                <div class="zr_common-box zr_com" style="width: 610px;">
                                <table>
                                    <thead>
                                        <tr>
                                            <td class="w-10">
                                                序号
                                            </td>
                                            <td class="w-30">
                                                问卷标题
                                            </td>
                                            <td class="w-25">
                                                创建时间
                                            </td>
                                            <td class="w-15">
                                                问卷类型
                                            </td>
                                            <td class="w-10">
                                                追加
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>
                                            01
                                        </td>
                                        <td class="ellipse">
                                            研究学术——大学生志愿服务方面调查问卷
                                        </td>
                                        <td>
                                            2017/11/20 10:21:12
                                        </td>
                                        <td>
                                           面访问卷
                                        </td>
                                        <td>
                                            <img src="img/add-wj.png" class="zr-icon-left zr_pointer" title="问卷内容"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            01
                                        </td>
                                        <td class="ellipse">
                                            研究学术——大学生志愿服务方面调查问卷
                                        </td>
                                        <td>
                                            2017/11/20 10:21:12
                                        </td>
                                        <td>
                                            面访问卷
                                        </td>
                                        <td>
                                            <img src="img/add-wj.png" class="zr-icon-left zr_pointer" title="问卷内容"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            01
                                        </td>
                                        <td class="ellipse">
                                            研究学术——大学生志愿服务方面调查问卷
                                        </td>
                                        <td>
                                            2017/11/20 10:21:12
                                        </td>
                                        <td>
                                            面访问卷
                                        </td>
                                        <td>
                                            <img src="img/add-wj.png" class="zr-icon-left zr_pointer" title="问卷内容"/>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                <div class="zr_word-mar" style="clear: both;">已选中<span class="zr_green-ionic"> 5 </span>道题<span class="zr_green-ionic"></span></div>
                <div class="zr-border-bottom"></div>
                <div class="zr-btns">
                    <button  class="zr_btn zr_cancel">取消</button>
                </div>
            </div>
        </div>
        <div class="zr_scroll-top" id="scrollTop">
            <img src="img/top.png"/>
        </div>
        <div class="zr_scroll-top zr_scroll-bottom" id="scrollBottom">
            <img src="img/bottom.png"/>
        </div>
    </div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script>
        var TorF = true;
        $('#change').on('click',function(){
            if(TorF){
                $('#advanced').show();
                $('#basics').hide();
                $(this).find('span').text('切换基础检索');
                TorF = false;
            }else{
                $('#advanced').hide();
                $('#basics').show();
                $(this).find('span').text('切换高级检索');
                TorF = true;
            }
        });
        $('#add-input').click(function(){
            $('#box-add').append(
                '<div class="zr_box">'+
                    '<input class="zr_float-l zr_input-box zr_radio-left" type="text" placeholder="请填写单选题题目"/>'+
                    '<span class="zr_float-l zr-title zr_red zr_pointer del">删除</span>'+
                '</div>'
            );
            $('.del').bind('click',function () {
                $(this).parent('.zr_box').remove();
            })
        });
        $('#add').click(function(){
            $('#add-t').show();
            $('body').css('overflowY','hidden');
        });
        $('.zr_cancel').click(function () {
            $('.zr_pop').hide();
            $('body').css('overflowY','scroll');
        });
        $('#better-til').click(function(){
            if($("#other").is(':hidden')){
                $("#other").show();
                $(this).find('.jt').attr('src','img/jiantou2.jpg');
            }else{
                $("#other").hide();
                $(this).find('.jt').attr('src','img/jiantou.jpg');
            }
        });
        $('#check').change(function () {
            if($(this).prop('checked')){
               $('#other-input').show();
            }else{
                $('#other-input').hide();
            }
        });
        $('#scrollTop').click(function(){
            $("html,body").animate({scrollTop:0}, 100);
        });
        $('#scrollBottom').click(function(){
            var bodyHeight = $(document).height();
            $("body,html").animate({ "scrollTop": bodyHeight + "px" }, 100);
        });
        $('#sel').click(function(){
            $('.zr-ul').show();
        });
        $('#sel-box').on('mouseleave',function(){
            $('.zr-ul').hide();
        });
        $('.zr-ul li').click(function(){
            $('.zr-ul').hide();
           var text = $(this).text();
           $('#sel-text').html(text);
        });
        $(window).on('scroll',function(){
            var h = 180 - $(this).scrollTop();
            if (h > 80){
                $('.zr-fixed').css('top',h);
            }else{
                $('.zr-fixed').css('top','80px');
            }
        });
        $('#add-wj-btn').click(function(){
            $('#add-wj').show();
        });
    </script>
</body>
</html>